<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="false" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="person-head">
			<cmd-avatar :src="avatar" @click="fnInfoWin" size="lg"
				:make="{'background-color': '#fff'}"></cmd-avatar>
			<view class="person-head-box">
				<view class="person-head-nickname">{{nickName}}</view>
				<view class="person-head-username">ID：{{number}}</view>
			</view>
		</view>
		<view class="person-list">
			<cmd-cell-item title="我的订单" slot-left arrow @click="toOrder">
				<cmd-icon type="bullet-list" size="24" color="#ff0000"></cmd-icon>
			</cmd-cell-item>
			<cmd-cell-item title="我的收藏" slot-left arrow @click="toCollect">
				<cmd-icon type="star" size="24" color="#ff0000"></cmd-icon>
			</cmd-cell-item>
			<cmd-cell-item title="我的闲置" slot-left arrow @click="toGoods">
				<cmd-icon type="shopping-bag" size="24" color="#ff0000"></cmd-icon>
			</cmd-cell-item>
			<cmd-cell-item title="我的悬赏榜" slot-left arrow @click="toOffer">
				<cmd-icon type="sketch" size="24" color="#ff0000"></cmd-icon>
			</cmd-cell-item>
			<cmd-cell-item title="检查版本" addon="v1.0" slot-left arrow>
				<cmd-icon type="alert-circle" size="24" color="#ff0000"></cmd-icon>
			</cmd-cell-item>
		</view>
	</view>
</template>

<script>
	import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import cmdIcon from "@/components/cmd-icon/cmd-icon.vue"
	import cmdCellItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {
			cmdAvatar,
			cmdCellItem,
			cmdIcon
		},
		data() {
			return {
				title: "我的",
				titleColor: "#330867",
				nickName:"",
				number:"",
				avatar:"",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
			};
		},
		computed: {
			...mapGetters(['getUserInfo'])
		},
		onLoad() {
			this.nickName = this.getUserInfo.nickName;
			this.number = this.getUserInfo.number;
			this.avatar = this.getUserInfo.avatar == "" ? "../../static/profile.jpg" : "http://localhost:8088" + this.getUserInfo.avatar;
		},
		methods: {
			/**
			 * 打开用户信息页
			 */
			fnInfoWin() {
				uni.navigateTo({
					url: '/pages/info/info'
				})
			},
			toOrder(){
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			toCollect(){
				uni.navigateTo({
					url: '/pages/collect/collect'
				})
			},
			toGoods(){
				uni.navigateTo({
					url: '/pages/goods/goods'
				})
			},
			toOffer(){
				uni.navigateTo({
					url: '/pages/offer/myOffer'
				})
			}
		}
	}
</script>

<style>
	.person-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 150px;
		padding-left: 20px;
		background: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
	}

	.person-head-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-left: 10px;
	}

	.person-head-nickname {
		font-size: 18px;
		font-weight: 500;
		color: #fff;
	}

	.person-head-username {
		font-size: 14px;
		font-weight: 500;
		color: #fff;
	}

	.person-list {
		line-height: 0;
	}
</style>
